<%- contentFor('heroContent') %>

    <!-- Hero Banner with Search -->
    <div class="hero-banner detail-hero-banner">
        <div class="hero-content">
            <div class="search-box-container">
                <form action="/search" method="GET" class="main-search-form">
                    <div class="search-select-wrapper">
                        <select name="searchType">
                            <option value="all">All</option>
                            <option value="title">Title</option>
                            <option value="author">Author</option>
                            <option value="isbn">ISBN(13 digits)</option>
                            <option value="issn">ISSN(8 digits)</option>
                            <option value="publisher">Publisher</option>
                        </select>
                    </div>
                    <input type="text" name="query" placeholder="Type ISBN or title..." class="main-search-input">
                    <button type="submit" class="main-search-btn">
                        <i class="search-icon"></i>
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- 面包屑导航 -->
    <div class="breadcrumb">
        <a href="/">Home</a> &gt; <a href="/journals">Journals</a> &gt; <%= detail ? detail.Journals : 'Detail' %>
    </div>

    <div class="page-container detail-page search-detail-page">

        <!-- 详情内容 -->
        <div class="detail-content" style="flex:1">
            <% if (error) { %>
                <div class="error-message">
                    <p>
                        <%= error %>
                    </p>
                    <!-- <a href="/journals" class="back-link">Back to Journals</a> -->
                </div>
                <% } else if (detail) { %>
                    <div class="book-details-wrapper">
                        <!-- 封面 -->
                        <div class="book-cover-large">
                            <% if (detail.CoverImage) { %>
                                <img src="<%= detail.CoverImage %>" alt="<%= detail.Title || 'Cover' %>"
                                    class="detail-cover-image">
                                <% } else { %>
                                    <img src="/images/img.png" alt="<%= detail.Title || 'Cover' %>"
                                        class="detail-cover-image placeholder-image">
                                    <% } %>
                        </div>

                        <!-- 基本信息（表格外） -->
                        <div class="book-info-detail">
                            <h1 class="book-title-large">
                                <%= detail.Journals || 'Untitled Journal' %>
                            </h1>

                            <% if(detail.Authors) { %>
                                <div class="book-main-info">
                                    <div class="detail-authors">
                                        <span class="author-label">Authors:</span>
                                        <a href="#">
                                            <%= detail.Authors %>
                                        </a>
                                    </div>
                                </div>
                                <% } %>

                                    <% if(detail.Editor) { %>
                                        <div class="book-main-info">
                                            <div class="detail-series">
                                                <span class="series-label">Editor:</span>
                                                <a href="#">
                                                    <%= detail.Editor %>
                                                </a>
                                            </div>
                                        </div>
                                        <% } %>

                                            <% if(detail.Publisher) { %>
                                                <div class="book-main-info">
                                                    <div class="detail-publisher">
                                                        <span class="publisher-label">Publisher:</span>
                                                        <%= detail.Publisher %>
                                                    </div>
                                                </div>
                                                <% } %>

                                                    <!-- 其他详细信息（表格内） -->
                                                    <div class="book-details-table-container">
                                                        <table class="book-details-table">
                                                            <tbody>
                                                                <tr>
                                                                    <th>ISSN</th>
                                                                    <td>
                                                                        <%= detail.ISSN %>
                                                                    </td>
                                                                </tr>

                                                                <tr>
                                                                    <th>Language</th>
                                                                    <td>
                                                                        <%= detail.Language %>
                                                                    </td>
                                                                </tr>

                                                                <tr>
                                                                    <th>Publication frequency</th>
                                                                    <td>
                                                                        <%= detail['Publication frequency'] %>
                                                                    </td>
                                                                </tr>

                                                                <!-- <tr>
                                                                    <th>FormatType</th>
                                                                    <td>
                                                                        <%= detail.FormatType %>
                                                                    </td>
                                                                </tr> -->

                                                            </tbody>
                                                        </table>
                                                    </div>

                                                    <% if (detail.Abstract || detail.abstract || detail.description ||
                                                        detail.Description || detail.Introduction) { %>
                                                        <!-- 描述部分 -->
                                                        <div class="book-description">
                                                            <h3>Description</h3>
                                                            <div class="description-content">
                                                                <%= detail.Abstract || detail.abstract ||
                                                                    detail.Introduction || detail.description ||
                                                                    detail.Description %>
                                                            </div>
                                                        </div>
                                                        <% } %>
                        </div>
                    </div>
                    <% } else { %>
                        <div class="not-found">
                            <p>未找到相关内容</p>
                        </div>
                        <% } %>
        </div>
    </div>

    <%- contentFor('style') %>
        <link rel="stylesheet" href="/css/search-detail.css">
        <style>
            .detail-cover-image {
                width: 140px;
                height: 172px;
                object-fit: cover;
                box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
                border-radius: 4px;
            }

            .book-details-wrapper {
                display: flex;
                margin-bottom: 30px;
                padding-bottom: 20px;
                border-bottom: 1px solid #eee;
            }

            .book-cover-large {
                flex: 0 0 140px;
                margin-right: 25px;
            }

            .book-info-detail {
                flex: 1;
            }

            .book-title-large {
                font-size: 24px;
                margin-top: 0;
                margin-bottom: 15px;
                color: #333;
            }

            .book-main-info {
                margin-bottom: 10px;
                font-size: 16px;
                color: #555;
            }

            .author-label,
            .publisher-label,
            .series-label {
                font-weight: 600;
                color: #333;
                display: inline-block;
                width: 80px;
                text-align: right;
                padding-right: 10px;
            }

            .detail-authors a,
            .detail-series a {
                color: #0066cc;
                text-decoration: none;
            }

            .detail-authors a:hover,
            .detail-series a:hover {
                text-decoration: underline;
            }

            .book-details-table-container {
                margin-top: 30px;
                margin-bottom: 30px;
            }

            .details-table-title {
                font-size: 18px;
                margin-bottom: 15px;
                color: #333;
            }

            .book-details-table {
                width: 100%;
                border-collapse: collapse;
                border: 1px solid #ddd;
            }

            .book-details-table th,
            .book-details-table td {
                padding: 10px 15px;
                border: 1px solid #ddd;
                text-align: left;
            }

            .book-details-table th {
                width: 25%;
                background-color: #f5f5f5;
                font-weight: 600;
            }

            .more-info-links {
                margin-top: 30px;
                margin-bottom: 30px;
            }

            .more-info-links h3 {
                font-size: 18px;
                margin-bottom: 15px;
                color: #333;
            }

            .links-list {
                list-style-type: none;
                padding: 0;
                margin: 0;
            }

            .links-list li {
                margin-bottom: 8px;
            }

            .links-list a {
                color: #0066cc;
                text-decoration: none;
            }

            .links-list a:hover {
                text-decoration: underline;
            }

            .book-description {
                margin-top: 30px;
                padding-top: 20px;
                border-top: 1px solid #eee;
            }

            .description-content {
                line-height: 1.6;
                color: #333;
            }

            .detail-actions {
                margin-top: 30px;
                padding-top: 15px;
                border-top: 1px solid #eee;
            }

            .back-btn {
                display: inline-block;
                padding: 8px 20px;
                background-color: #111579;
                color: white;
                text-decoration: none;
                border-radius: 4px;
                font-size: 14px;
                transition: background-color 0.2s;
            }

            .back-btn:hover {
                background-color: #0d1162;
            }

            .not-found {
                text-align: center;
                padding: 50px 0;
            }

            .not-found p {
                font-size: 18px;
                color: #666;
                margin-bottom: 20px;
            }

            @media (max-width: 767px) {
                .book-details-wrapper {
                    flex-direction: column;
                }

                .book-cover-large {
                    margin-right: 0;
                    margin-bottom: 20px;
                    text-align: center;
                }

                .book-details-table th {
                    width: 35%;
                }

                .author-label,
                .publisher-label,
                .series-label {
                    width: 70px;
                }
            }
        </style>
